<template>
  <div class="history-code-panel">
    <el-tabs type="border-card" v-model="activeTab" @tab-click="onTabClick">
      <el-tab-pane
        v-for="problem in problemData"
        :key="problem._id"
        :label="problem.title"
        :name="problem._id"
      >
        <code-panel-read-only ref="codePanelReadOnly"> </code-panel-read-only>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from "axios";
import CodePanelReadOnly from "@/components/History/CodePanelReadOnly.vue";
export default {
  name: "HistoryCodePanel",
  components: {
    CodePanelReadOnly,
  },
  methods: {
    setProblemData(data) {
      this.problemIdx = 0;
      this.problemData = data;
      this.setProblem(this.problemData[0]);
    },
    setUserId(uid) {
      this.userId = uid;
    },
    setProblem(problem) {
      this.problem = problem;
      this.activeTab = this.problem._id;
      this.$nextTick(() => {
        this.getCode();
      });
    },
    onTabClick(tab) {
      console.log("onTabClick");
      let pid = tab.name;
      this.problem = this.problemData.find((problem) => {
        return problem._id === pid;
      });
      this.problemIdx = this.problemData.indexOf(this.problem);
      this.$nextTick(() => {
        this.$refs["codePanelReadOnly"][this.problemIdx].editer.refresh();
        this.getCode();
      });
    },
    getCode() {
      // this.$refs["codePanelReadOnly"][this.problemIdx].setCode(
      //   "this.code=" +
      //     this.code +
      //     "\nthis.problemIdx=" +
      //     this.problemIdx +
      //     "\nthis.userId=" +
      //     this.userId
      // );
      // 获取面试的题目代码
      let roomId = this.$route.params.rid;
      axios
        .get("/api/docTransfer/getCode", {
          params: {
            pid: this.problem._id,
            rid: roomId,
            uid: this.userId,
          },
        })
        .then((response) => {
          console.log(response);
          if (response.data.status == 1) {
            this.code = response.data.result.code;
            this.$refs["codePanelReadOnly"][this.problemIdx].setCode(this.code);
            this.$message.success("获取代码成功");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("获取代码失败");
        });
    },
  },
  data() {
    return {
      code: "test",
      activeTab: "",
      userId: "",
      problemIdx: 0,
      problem: {},
      // problem: {
      //   _id: "",
      //   title: "",
      //   difficulty: 0,
      //   content: "",
      //   status: 0,
      // },
      problemData: [],
    };
  },
};
</script>

<style></style>
